<script setup lang="ts">
import ContentTitle from '~/components/ContentTitle/index.vue'
import PaginationAlbum from '~/components/PaginationAlbum/index.vue'
import APICommon from '~/api/common'
import type { Module } from '~/api/common/types'

definePageMeta({
    showSmallSearchBox: true,
})

const $router = useRouter()
const $route = useRoute()

const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 16
})

const list = ref<any[]>([])

const total = shallowRef<number>(0)

function getParentList() {

    const data = {
        category_type: ($route.query.type as string) ?? 'All',
        more: 1
    }
    APICommon.getParentList(data, queryParams.value).then(({ data }) => {
        list.value = data
    })
}

watch($route, () => {
    getParentList()
}, {
    immediate: true
})

</script>

<template>
    <div class="video-album">
        <ContentTitle title="更多合作品牌" style="margin: 28px 0;" />
        <div v-loading="loading">
            <el-empty description="暂无内容" v-if="list.length == 0" />
            <div class="cooperative-brands-content">
                <div class="item" v-for="item in list" :key="item.id">
                    <a :href="item.brand_href" target="_blank">
                        <div class="cooperative-logo">
                            <img :src="item.color_icon" alt="logo">
                        </div>
                        <div class="cooperative-text">{{ item.name }}</div>
                    </a>
                </div>
            </div>
        </div>
        <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
            @get-list="getParentList" />
    </div>
</template>

<style lang="less" scoped>
.video-album {
    width: 1300px;
    margin: 0 auto;

    .cooperative-brands-content {
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        gap: 40px;

        .item {
            cursor: pointer;

            a {
                text-decoration: none;
            }

            &:hover {
                .cooperative-logo {
                    filter: grayscale(0%);
                }

                .cooperative-text {
                    color: #3894FF;
                }
            }

            .cooperative-logo {
                text-align: center;
                height: 39px;
                color: #9e9e9e;
                filter: grayscale(100%);
                transition: all .2s;

                img {
                    height: 39px;
                }
            }

            .cooperative-text {
                color: rgba(154, 154, 154, 1);
                font-size: 14px;
                text-align: center;
                margin-top: 20px;
                transition: all .2s;
                cursor: pointer;
            }
        }
    }

    .video-content {
        gap: 30px 28px;
        margin-bottom: 30px;
    }
}
</style>
